.b-dropdown-menu__bar {
  width: 100%;
  height: 48px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 12%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 10;
  background: white;
}
.b-dropdown-menu {
  .b-dropdown-popup {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
  }

  .b-dropdown-popup-content {
    width: 100%;
    height: 100px;
    background: pink;
    position: absolute;
  }

  .slide-top {
    top: 0px;
    transition: 0.2s ease-out;
    transform: translate(0, -100%);
    z-index: 1;
  }
  .slide-reset {
    transition: none;
    transform: translate(0, -100%);
  }
  .slide-top--show {
    transform: translate(0);
  }

  .b-dropdown-menu__btn {
    position: relative;
  }
  .b-dropdown-menu__btn--active {
    color: red;
  }
  .b-dropdown-menu__btn::after {
    position: absolute;
    top: 50%;
    right: -4px;
    margin-top: -3px;
    border: 3px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
    transition: 0.3s;
  }
  .b-dropdown-menu__btn--active::after {
    margin-top: 0px;
    transform: rotate(135deg);
    border-color: transparent transparent red red;
  }
}
